<template>
  <div class="index">
    <div style="padding: 12px;">
      <el-button type="primary" style="padding: 20px;font-size: 20px;" @click="hideFlag = !hideFlag">显示收入
      </el-button>

    </div>
    <div class="container">
      <div class="child">
        <span>总用户数：</span>
        <el-tag style="font-size: 32px;">{{ totalUsersCount }}人</el-tag>
      </div>
      <div class="child">
        <span>今日新增用户数：</span>
        <el-tag style="font-size: 32px;">{{ todayNewUsersCount }}人</el-tag>
      </div>
      <div class="child">
        <span>今日在线人数：</span>
        <el-tag style="font-size: 32px;">{{ todayOnlineUsersCount }}人</el-tag>
      </div>

    </div>


    <div v-show="hideFlag">
      <div class="container">
        <div class="child">
          <span>总收入：</span>
          <el-tag style="font-size: 32px;">{{ totalIncome }}元</el-tag>
        </div>
      </div>
      <div class="container">
        <div class="child">
          <span>保险收入：</span>
          <el-tag style="font-size: 32px;">{{ insuranceIncome }}元</el-tag>
        </div>
        <div class="child">
          <span>抽成收入：</span>
          <el-tag style="font-size: 32px;">{{ rakeIncome }}元</el-tag>
        </div>
        <div class="child">
          <span>会员收入：</span>
          <el-tag style="font-size: 32px;">{{ vipIncome }}元</el-tag>
        </div>
      </div>
    </div>

  </div>


</template>
<script>
import {
  indexPage
} from '@/api/api.js';


export default {
  data() {
    return {
      totalUsersCount: '0',
      todayNewUsersCount: '0',
      todayOnlineUsersCount: '0',
      totalIncome: '0',
      insuranceIncome: '0',
      rakeIncome: '0',
      vipIncome: '0',
      hideFlag: false
    }
  },
  created() {
    this.getData();
  },

  methods: {

    getData(params) {
      indexPage(params)
          .then(res => {
            console.log(res.data);

            this.totalUsersCount = res.data.totalCount;
            this.todayNewUsersCount = res.data.todayCount;
            this.todayOnlineUsersCount = res.data.todayOnlineUsersCount;
            this.totalIncome = res.data.totalIncome;
            this.insuranceIncome = res.data.insuranceIncome;
            this.rakeIncome = res.data.rakeIncome;
            this.vipIncome = res.data.vipIncome;
          })
    }
  }
}
</script>

<style lang="scss" scoped>
.index {
  margin-top: 20px;
  font-size: 32px;

}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.child {
  width: 100%;
  flex: 1;
  padding: 12px;
}

p {
  font-size: 32px;

}
</style>